<template xmlns="http://www.w3.org/1999/html">
  <div>
    <blockquote class="blockquote-info bg-info">简单输入框</blockquote>
    <el-table :data="list">
      <sea-col-link sortable="custom" property="name" label="姓名"
                    :click="onAction"></sea-col-link>

      <sea-col-switch property="isDisabled" label="是否可用"
                      :change="onAction"></sea-col-switch>

      <sea-col-input property="name" label="行内编辑"
                     :change="onAction"></sea-col-input>

      <sea-col-select type="select" property="select" label="行内选择"
                      :change="onAction" :options="options"></sea-col-select>

      <sea-col-image property="image" label="图片"></sea-col-image>

      <sea-col-dictionary property="select" label="数据字典" width="180"
                          :options="options"></sea-col-dictionary>

      <sea-col-rate property="select" label="星级" width="180"
                    :change="onAction"></sea-col-rate>

      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>

    <blockquote class="blockquote-info bg-info">日期校验</blockquote>
    <el-table :data="valid_list">
      <el-table-column property="date" label="日期" width="180"></el-table-column>

      <sea-col-date property="date" label="日期编辑"
                    :change="onAction"></sea-col-date>

      <el-table-column property="time" label="时间" width="180"></el-table-column>

      <sea-col-time property="time" label="时间编辑"
                    :change="onAction"></sea-col-time>
    </el-table>
  </div>
</template>

<script>
import TableValidator from "../../widget/data-table/table-validator";

export default {
    components: {},
    data() {
        return {
            // 多选的数据
            selection: undefined,
            // 是否发生过多选
            multiple: false,
            // 多选按钮列表
            batch: [
                {label: '调整', value: '$change'}
                , {label: '删除', value: '$delete'}
            ],
            list: [{
                date: '2016-05-02',
                time: '11:11:11',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                isDisabled: false,
                select: 1
            }, {
                date: '2016-05-04',
                time: '11:11:11',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                isDisabled: true,
                select: 2,
                image: 'http://www.baidu.com'
            }, {
                date: '2016-05-01',
                time: '11:11:11',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                isDisabled: true,
                select: 3,
                image: 'http://www.baidu.com'
            }, {
                date: '2016-05-03',
                time: '11:11:11',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                isDisabled: true,
                select: 1,
                image: 'http://www.baidu.com'
            }],
            // 带数据校验的数据列表
            valid_list: [],

            // 数据校验
            rules: {
                name: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ]
            },
            // 下拉框
            options: [
                {value: 1, label: '区域1', style: ''}
                , {value: 2, label: '区域2', style: ''}
                , {value: 3, label: '区域3', style: ''}
                , {value: 4, label: '区域4', style: ''}
            ]
        }
    },
    created() {
        TableValidator.wrap(this.list, this.rules);
        this.valid_list = this.list;


        // 先调用一下这个函数，启用数据调用效果，这个代码一般是在提交表单的时候执行
        TableValidator.checkList(this.valid_list, this.rules);
    },
    methods: {
        /**
         * 管理所有的事件
         *
         * @param evt 事件名称
         * @param row 行级数据
         * @param opts 历史值，用于前端数据回滚，不需要刷新整个界面
         */
        onAction: function (evt, row, opts) {
            console.log(opts);
            row[opts.field] = opts.value;

            console.log(opts.field === 'name');
            if (opts.field === 'name') {
                // 实际应该使用这个函数
                TableValidator.checkItem(row, this.rules, opts.field);
            }

            // if(old.field === 'name'){
            //     layers.warn('adasdas');
            //     console.log(row[old.field] );
            //     // setTimeout(()=>{
            //     //     row[old.field] = old.value;
            //     // }, 50)
            //     // throw 'aasdsa';
            //     // console.log(row[old.field] );
            // }
        }
        /**
         * 多选操作按钮
         */
        , multipleClick: function () {
            let selection = this.$refs.tableObject.getSelection();
            if (this.$layers.isEmpty(selection)) {
                this.$layers.warn('请先选中操作的行！');
                return false;
            }
            this.selection = selection;
            this.multiple = true;
        }
    }
}
</script>
